<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  #box {
    height: 100px;
    width: 100%;
    overflow-y: scroll;
  }

  #box2 {
    height: 200px;
  }

  #box1 {
    width: 30px;
    height: 30px;
    background-color: red;
  }

  .refresh {
    text-align: center;
    position: absolute;
    height: 30px;
    transform: translateY(-100%);
    left: 0;
    transition: all .2s;
  }
</style>

<body>
  <div id="box">
    <div id="box2"></div>
    <div id="box2"></div>
    <div id="box1"></div>
  </div>

</body>

<script>
  function Slide(dom) {
    this.dom = dom
    this.start_y = null;//手指滑动屏幕的初始位置
    this.end_y = null;//手指滑动屏幕的结束位置
    this.render(dom)
  }
  Slide.prototype = {
    render: function (dom) {
      dom.style.position = 'relative'
      // 创建正在刷新的div
      const newItem = document.createElement('div')
      newItem.className = 'refresh'
      newItem.innerHTML = '下拉刷新';
      // 创建的元素插入目标元素中
      dom.appendChild(newItem)
      // 获取插入的元素
      const dom2 = document.getElementsByClassName('refresh')
      //运行slide_start（）
      this.slide_start(dom2);

    },
    slide_start: function (dom2) {
      var _this = this;
      this.dom.addEventListener('touchstart', function (e) {
        _this.start_y = Number(e.touches[0].pageY)

      })
      // 运行slide_move
      _this.slide_move(dom2);
    },
    slide_move: function (dom2) {
      var _this = this;
      _this.dom.addEventListener('touchmove', function (e) {
        // 下面这一行代码是保证在手指移动的距离还不到规定的长度时候，就不显示 '正在刷新。。'
        var touch = e.touches[0]; //获取第一个触点
        //获取手指向下移动的长度距离
        if (_this.dom.scrollTop == 0) {
          _this.start_y = Number(e.touches[0].pageY)

          _this.end_y = Number(touch.pageY) - _this.start_y;
          // console.dir(dom2[0].offsetTop);
          // dom2[0].style.top + 
          console.log(_this.end_y);
          // console.log(_this.end_y);
        }


      })
    }
  }
  const box = document.getElementById('box')
  const a = new Slide(box)
  const io = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) {
      console.log(entries)
    }

  }, {
    root: document.querySelector("#box"),
    threshold: [0.5, 1]
  })
  io.observe(document.getElementById('box1'))
</script>

</html>